<template>
    <el-dropdown
      placement="bottom-end"
      popper-class="tagview-more-dropdown"
      @visible-change="handleVisibleChange"
      @command="handleCommand"
    >
      <span
        class="tagview-contents-more"
        :class="{ 'tagview-contents-more-active': active }"
      >
        <span class="tagview-contents-more-icon">
          <i class="box box-t"></i>
          <i class="box box-b"></i>
        </span>
      </span>
   
      <template #dropdown>
        <el-dropdown-menu>
          <template v-for="(item, index) in list" :key="item.name">
            <el-dropdown-item
              :command="index"
              :disabled="index === 1 && tagViewLenght === 1"
            >
              <SvgIcon :showDefault="false" size="16px" :name="item.icon" />
              {{ item.name }}
            </el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </template>
   
  <script setup >
  import { ref } from 'vue'
  defineProps({
    list:[],
    tagViewLenght: Number
  })
 
  const $emit = defineEmits(['handleClick'])
  const active = ref(false)
  const handleVisibleChange = (type) => (active.value = type) //菜单下拉框事件
  const handleCommand = (type) => $emit('handleClick', type, false) //点击某一项执行的方法
  </script>
   